<template>
    <div style="background-color: #ececec; padding: 20px">
      <a-row :gutter="15">
        <a-col>
          <a-card title="LPG统计" :bordered="false">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="起始时间:">
                <el-date-picker v-model="formInline.startTime" :type="formInline.datePickerType" placeholder="选择起始时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间:">
                <el-date-picker v-model="formInline.endTime" :type="formInline.datePickerType" placeholder="选择结束时间"></el-date-picker>
              </el-form-item>
              <el-form-item label="部门:">
                <el-select v-model="formInline.dept" placeholder="选择部门">
                  <el-option v-for="item in this.dept"
                          :key="item.value"
                          :label="item.label"
                          :value="item.departName">{{ item.departName }}
                        </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="日期类型:">
                <el-select v-model="formInline.datePickerType" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
          </a-card>
        </a-col>
      </a-row>
      
      <a-row :gutter="16" :style="{ marginTop: '16px' }">.
        <a-col :span="8"> <br>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>本月单品能耗碳(t/万套)</span>
              <el-tooltip class="item" effect="dark" placement="top">
                <div slot="content">本月单品能耗碳(t/万套)<hr/>
                  本月单品能耗碳 = 本月CO2排放 / 10000<br>
                  本月LPGCO2排放 =(本月LPG用量kg / 1000) t × LPGCO2排放系数</div>
                <el-button icon="el-icon-more" circle style="float: right; padding: 5px 5px"></el-button>
              </el-tooltip>
            </div>
            <div class="text item" style="font-size: 44px;">{{thisMonth}}</div>
            <div class="text item">较上月 {{lastMonth}}%</div>
          </el-card>
        </a-col>
        <a-col :span="8"> <br>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>今年碳排放峰值(t)</span>
              <el-tooltip class="item" effect="dark" placement="top">
                <div slot="content">今年碳排放峰值(t)<hr/>
                  今年碳排放峰值 = 本年度各月份中碳排放最大值<br>
                  LPG月度CO2排放 =(月度LPG用量kg / 1000) t × LPGCO2排放系数</div>
              <el-button icon="el-icon-more" circle style="float: right; padding: 5px 5px"></el-button>
            </el-tooltip>
            </div>
            <div class="text item" style="font-size: 44px;">{{yearMax}}</div>
            <div class="text item">去年碳排放峰值 {{lastYearMax}}</div>
          </el-card>
        </a-col>
        <a-col :span="8">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>今年碳排放最小值(t)</span>
              <el-tooltip class="item" effect="dark" placement="top">
                <div slot="content">今年碳排放最小值<hr/>
                  今年碳排放最小值 = 本年度各月份中碳排放最小值<br>
                  LPG月度CO2排放 =(月度LPG用量kg / 1000) t × LPGCO2排放系数</div>
              <el-button icon="el-icon-more" circle style="float: right; padding: 5px 5px"></el-button>
            </el-tooltip>
            </div>
            <div class="text item" style="font-size: 44px;">{{yearMin}}</div>
            <div class="text item">去年碳排放最小值 {{lastYearMin}}</div>
          </el-card>
        </a-col>
      </a-row>
      <br>

      <template>
        <a-card style="width: 100%">
          <div style="width:100%; height:330px;">
            <div id="main" ref="e4" class="five"></div>
          </div>
        </a-card>
      </template>

    </div>
  </template>

<script>
import { httpAction, getAction, postAction } from '@/api/manage'
import * as echarts from 'echarts';
  export default {
    data () {
      return {
        options: [{value: 'month', label: '月'}, {value: 'date', label: '天'}],
        chart: null,
        formInline: {
          datePickerType: 'month',
          startTime: '',
          endTime: '',
          dept: ''
        },
        formLastYear: {
          startTime: '',
          endTime: '',
          dept: ''
        },
        thisMonth: '',
        lastMonth: '',
        yearMax: '',
        yearMin: '',
        lastYearMax: '',
        lastYearMin: '',
        coefficient: {},
        url: {
          getDept: '/sys/sysDepart/list',
          getStatistics:'/consumptionLpg/consumptionLpg/select',
          getCoefficient:'/emissionCarbon/emissionCarbon/getCoefficient',
          getOutput: '/output/output/getByDept',
        },
      }
    },
    methods: {
      getLastYear(){
        var date = new Date();
        let endDate = (date.getFullYear()-1)+"/12/01";
        let startDate = (date.getFullYear()-1)+"/01";
        this.formLastYear.startTime = new Date(Date.parse(startDate));
        this.formLastYear.endTime = new Date(Date.parse(endDate));
        this.formLastYear.dept = this.formInline.dept;
        let lastYearMax = 0;
        let lastYearMin = 0;
        postAction(this.url.getStatistics,this.formLastYear).then((res)=>{
          res.result.forEach(e=>{
          let con = ((parseInt(e.consumption))/this.coefficient.lpgchang)*this.coefficient.lpgbian;
          if (lastYearMax == 0){
            lastYearMax = con;
            } else if (lastYearMax < con){
              lastYearMax = con;
            }
            if (lastYearMin == 0){
              lastYearMin = con;
            } else if (lastYearMin > con){
              lastYearMin = con;
            }
          })
          this.lastYearMax = lastYearMax.toFixed(2);
          this.lastYearMin = lastYearMin.toFixed(2);
        })
      },
      getCoefficient(){
        getAction(this.url.getCoefficient).then((res)=>{
          console.log(res);
          this.coefficient = res.result;
        })
      },
      selectStatistics(){
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth()+1;
        let month1 = date.getMonth();
        let month2 = month < 10 ? "0" + month : month;
        let month3 = month1 < 10 ? "0" + month1 : month1;
        let thisMonthTime = year+"-"+month2;
        let lastMonthTime = year+"-"+month3;
        let thisMonth = 0;
        let thisOutput = 0;
        let lastMonth = 0;
        let lastOutput = 0;
        let yearMax = 0;
        let yearMin = 0;
        postAction(this.url.getOutput,this.formInline).then((res)=>{
          console.log(res);
          res.result.forEach(e=>{
            let time = e.time;
            if(time.indexOf(thisMonthTime) != -1){
              thisOutput = e.output;
            }
            if(lastMonthTime != '00'){
              if(time.indexOf(lastMonthTime) != -1){
                lastOutput = e.output;
              }
            }else{
              if(time.indexOf((year-1)+"-12")){
                lastOutput = e.output;
              }
            }
          })
        })
        setTimeout(() => {
          postAction(this.url.getStatistics,this.formInline).then((res)=>{
            res.result.forEach(e=>{
              let con = ((parseInt(e.consumption))/this.coefficient.dianchang)*this.coefficient.dianbian;
              if (yearMax == 0){
                yearMax = con;
              } else if (yearMax < con){
                yearMax = con;
              }
              if (yearMin == 0){
                yearMin = con;
              } else if (yearMin > con){
                yearMin = con;
              }
              if(month == e.month && year == e.year){
                thisMonth = con/parseInt(thisOutput);
                console.log(thisMonth);
              }
              if(month1 != 0){
                if(month1 == e.month){
                  lastMonth = con/parseInt(lastOutput);
                  console.log(lastMonth);
                }
              } else{
                if(12 == e.month && (year-1) == e.year){
                  lastMonth = con/parseInt(lastOutput);
                  console.log(lastMonth);
                }
              }
            })
          this.thisMonth = thisMonth.toFixed(2);
          this.lastMonth = (parseFloat(thisMonth)/parseFloat(lastMonth)).toFixed(2);
          this.yearMax = yearMax.toFixed(2);
          this.yearMin = yearMin.toFixed(2);
          })
        }, 150)
      },
      loadEmission(){
        var endDate = new Date();
        var startDate = (endDate.getFullYear()-1)+"/"+(endDate.getMonth()+1);
        let data1 = [];
        let data2 = [];
        this.formInline.startTime = new Date(Date.parse(startDate));
        console.log(startDate);
        this.formInline.endTime = endDate;
        console.log(endDate);
        console.log(this.formInline);
        postAction(this.url.getStatistics,this.formInline).then((res)=>{
          console.log(res);
          res.result.forEach(item=>{
            if('date' == this.formInline.datePickerType){
              data1.push(item.year+'-'+item.month+'-'+item.day);
            }else{
              data1.push(item.year+'-'+item.month);
            }
            data2.push(((item.consumption/this.coefficient.lpgchang)*this.coefficient.lpgbian).toFixed(2));
          })
          this.data1 = data1;
          this.data2 = data2;
        })
      },
      onSubmit() {
        let data1 = [];
        let data2 = [];
        if('month' == this.formInline.datePickerType){
          let endTime = new Date(this.formInline.endTime);
          let year = endTime.getFullYear();
          let month = endTime.getMonth()+1;
          let lastDate = new Date(year, month , 0).getDate();
          month = month < 10 ? '0' + month : month ;
          endTime = [year,month ,lastDate ].join("-")+" 23:59:59";
          this.formInline.endTime = new Date(endTime);
        }
        postAction(this.url.getStatistics,this.formInline).then((res)=>{
          console.log(res);
          res.result.forEach(item=>{
            if('date' == this.formInline.datePickerType){
              data1.push(item.year+'-'+item.month+'-'+item.day);
            }else{
              data1.push(item.year+'-'+item.month);
            }
            data2.push(item.consumption);
          })
          this.data1 = data1;
          this.data2 = data2;
        })
        setTimeout(() => {
          this.getzhu()
        }, 500)
      },
      handleChange1(){
        this.dept = []
        getAction(this.url.getDept).then((res)=>{
          this.dept = res.result;
          console.log(this.dept);
        })
      },
      getzhu(){
        if(this.chart != null && this.chart != '' && this.chart != undefined){
          this.chart.dispose();
        }
        var chartDom = document.getElementById('main');
        this.chart = echarts.init(chartDom);
        var option;
        option = {
          title: {
            text: '实际碳排放&&单品能耗碳'
          },
          tooltip: {trigger: 'axis'},
          legend: {
            data: ['实际碳排放']
          },
          toolbox: {
            feature: {
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            },
            padding: [0,15,0,0]
          },
          xAxis: {
            type: 'category',
            data: this.data1,
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '实际碳排放',
              data: this.data2,
              type: 'line',
              smooth: true,
            }
          ],
        };
        option && this.chart.setOption(option,true);
      },
    },
    created () {
      this.handleChange1();
      this.getCoefficient();
      setTimeout(() => {
        this.formInline.dept = this.dept[this.dept.length-1].departName;
        this.loadEmission();
        this.selectStatistics();
        this.getLastYear();
      }, 500)
      setTimeout(() => {
        
      }, 700)
    },
    mounted(){
      //this.datasource = data
      setTimeout(() => {
        this.getzhu()
      }, 900)
    },
  }
</script>

<style>
 .sousuo{
  font-size: 14px;
  display: inline;
  /* font-weight:bold; */
 }
 .five {
  width: 100%;
  height: 100%;
}
.text {
    font-size: 14px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    /* width: 480px; */
    height: 180px;
  }

  .el-card__body{
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
  }
</style>
  
  
  